<template>
    <div id="liuzi">
        <div class="init">
            <input type="text" name="name" v-model="name" placeholder="姓名" />
            <input type="number" name="mobile" v-model="mobile" placeholder="手机号" />
            <input type="text" name="address" v-model="address" placeholder="地址" />
		    <div @click="liuziAction()" class="liuziBtn">确认</div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'liuzi',
    data(){
        return{
            name:'',
            mobile:'',
            address:''
        }
    },
    watch:{
        name(newVal,oldVal){
            this.center.$emit('changename',newVal)
        },
        mobile(newVal,oldVal){
            this.center.$emit('changemobile',newVal)
        }
    },
    methods:{
        liuziAction(){
            if(this.name==''){
                layer.open({content: '请输入姓名',btn: '关闭'});
                return;
            }else if(!(/[\u4E00-\u9FA5]/.test(this.name))){
                layer.open({content: '请输入正确的姓名',btn: '关闭'});
                return;
            }else if(this.mobile==''){
                layer.open({content: '请输入手机号',btn: '关闭'});
                return;
            }else if(!(/^1\d{10}$/.test(this.mobile))){
                layer.open({content: '请输入正确的手机号',btn: '关闭'});
                return;
            }else if(this.address==''){
                layer.open({content: '请输入地址',btn: '关闭'});
                return;
            }else if(!(/[\u4E00-\u9FA5]/.test(this.address))){
                layer.open({content: '请输入正确的地址',btn: '关闭'});
                return;
            }
            
            let userAnswer = sessionStorage.getItem('userAnswer');
            //留资接口
            this.$axios.post("/tnexchange.php?_a=getuserinfo",{
                name:this.name,
                mobile:this.mobile,
                address:this.address,
                userAnswer:userAnswer
            })
            .then((response)=>{
                this.center.$emit('showLiuzi',false)
            })
            .catch((error)=>{
                console.log(error)
            })
        }
    }
}
</script>

<style>
#liuzi .init{
    width: 66.66vw;
    height: 65.86vw;
    background: url(../../static/img/liuzi_bg.png);
    background-size: 66.66vw 65.86vw;
	position: absolute;
	top: 38.26vw;
    left: 50%;
    margin-left: -33.33vw;
    text-align: center;
    padding-top: 7.33vw;
    box-sizing: border-box;
}
#liuzi{
	position: absolute;
	top: 0;
	left: 0;
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9;
}
input{
    width: 54.66vw;
    height: 9.6vw;
    border-radius: 1.33vw;
    border: 1px solid #eeeeee;
    font-size: 3.73vw;
    padding-left: 3.33vw;
    box-sizing: border-box;
    margin-top: 3.2vw;
}
.liuziBtn{
	position: absolute;
	width: 30vw;
	height: 6.66;
	background: #b01f24;
	color: #fff;
	line-height: 6.67vw;
	font-weight: 1000;
	text-align: center;
	font-size: 3.2vw;
	border-radius: 0.8vw;
	bottom: 7.2vw;
	left: 50%;
	margin-left: -15vw;
}
</style>
